<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>净值分析</title>
    <style>
    .row{
        margin: 0;
    }
    </style>
</head>
<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>净值分析</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                净值分析
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">
    <g:form method="POST" action="netValueAnalyze" class="form-horizontal" role="form" id="form">
        <div class="hpanel hblue">
            <div class="panel-heading">
                <div class="panel-tools">
                    <button class="btn btn-primary btn-xs" type="submit" id="searchData"><i class="fa fa-search"></i> 查询</button>
                    <button class="btn btn-warning2 btn-xs" type="button" id="resetBtn">
                        <i class="fa fa-times"></i> 重置</button>
                </div>
                查询
            </div>
    </g:form>
    <div class="panel-body seach-group" id="bug1">
        <div class="row">
            <div class="form-group col-sm-3">
                <label class="col-sm-3 control-label">城市</label>
                <div class="col-sm-9 input-group" style="display: flex;justify-content: center">
                    <g:select class="form-control" name="city" id="city" from="${com.cindata.City.findAllByNameInList(new com.cindata.ComponentService().evaluate(com.cindata.Component.findByCode('showCity')), [sort: 'name', order: 'asc'])}"
                              valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                              value="${params?.city}"/>
                </div>
            </div>
            <div class="form-group col-sm-3">
                <label class="col-sm-3 control-label">贷款年限</label>
                <div class="col-sm-9 input-group" style="display: flex;justify-content: center">
                    <g:select class="form-control" name="loansDuration" id="loansDuration"
                              from="${com.cindata.dimension.YearLimitDimension.list()}"
                              valueMessagePrefix="status" optionKey="label" optionValue="label"
                              value="${params?.loansDuration}"
                              noSelection="${["": '全部']}"/>
                </div>
            </div>
            <div class="form-group col-sm-3">
                <label class="col-sm-3 control-label">还款比例</label>
                <div class="col-sm-9 input-group" style="display: flex;justify-content: center">
                    <g:select class="form-control" name="repaymentRatio" id="repaymentRatio"
                              from="${['已还0-50%','已还50%-80%','已还80%以上']}"
                              value="${params?.repaymentRatio}"
                              noSelection="${['': '全部']}"/>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="hpanel hred" style="">
            <div class="panel-heading">
                <div class="panel-tools">
                </div>
            </div>

            <div class="panel-body no-padding">
                <div id="prodNumber" style="width: 100%;height: 420px;"></div>
            </div>
        </div>
    </div>
    <asset:javascript src="echarts/echarts-all-3.js" />

    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                &nbsp;&nbsp;
            </div>
            <div class="panel-body no-padding">
                <div class="table-responsive">
                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center" id="contactTable">
                        <thead>
                        <tr>
                            <td>押品编号</td>
                            <td>房屋用途</td>
                            <td>城市</td>
                            <td>行政区</td>
                            <td>房屋坐落</td>
                            <td>面积(平米)</td>
                            <td>当前估值(元)</td>
                            <td>价值波动率</td>
                            <td>增值总额</td>
                            <td>净值资产额度</td>
                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${collateralList}">
                            <tr>
                                <td>${it?.externalId?it?.externalId:'-'}</td>
                                <td>${it?.buildingType?it?.buildingType:'-'}</td>
                                <td>${it?.city?it?.city:'-'}</td>
                                <td>${it?.district?it?.district:'-'}</td>
                                <td>${it?.sourceAddress?it?.sourceAddress:'-'}</td>
                                <td>${it?.sourceBuildArea?it?.sourceBuildArea:'-'}</td>
                                <td>${it?.latestEvaluatePrice?it?.latestEvaluatePrice:'-'}</td>
                                <td>${it?.priceFluctuationsRatio?it?.priceFluctuationsRatio:'-'}</td>
                                <td>${it?.latestEvaluatePrice-it?.firstEvaluatePrice}</td>
                                <td>${it?.latestEvaluatePrice-it?.firstEvaluatePrice-it?.loansBalance}</td>
                            </tr>
                        </g:each>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel-footer">
                <div class="pagination">
                    <g:paginate action="netValueAnalyze" total="${collateralCount ?: 0}" params="${params}"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //重置按钮
    $("#resetBtn").click(function () {
        $("#s2id_city span:first").html("请选择城市");
        $("#city").val("");
        $("#s2id_loansDuration span:first").html("全部");
        $("#loansDuration").val("");
        $("#s2id_repaymentRatio span:first").html("全部");
        $("#repaymentRatio").val("");
    });
    
    var nameList = [];
    var arr = "${nameList}".replace("[","").replace("]","").split(",");
    $.each(arr,function(){
        nameList.push(this.toString())
    })
    var myChart = echarts.init($('#prodNumber').get(0));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            },
            // formatter:'{b0}<br/>数量：{c0}</br> 贷款金额：{c1} 亿元</br>贷款余额:  {c2} 亿元<br />'
            formatter: function(params) {
                var res = '<div>';
                res += '<strong>' + params[0].name + '</strong>'
                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesName == '增值数量') {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                    }
                    if (params[i].seriesName == '增值总额') {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 亿元'
                    }
                    if (params[i].seriesName == '净值资产额度') {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 亿元'
                    }
                }
                res += '</div>';
                return res;
            }
        },
        legend: {
            // selectedMode:false,
            data:['增值数量','增值总额','净值资产额度'],
            textStyle: {
                color : "#ADADAD"
            }
        },
        xAxis: [
            {
                type: 'category',
                axisLabel: {
                    interval: 0,
                    rotate: 0
                },
                data: nameList,
                axisLine:{
                    lineStyle:{
                        color:'#ADADAD',
                    }
                },
                // axisPointer: {
                //     type: 'shadow'
                // }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量(笔)',
                axisLabel: {
                    formatter: '{value}'
                },
                axisLine:{
                    lineStyle:{
                        color:'#ADADAD',
                    }
                },
            },
            {
                type: 'value',
                name: '金额(亿元)',
                axisLabel: {
                    formatter: '{value}'
                },
                axisLine:{
                lineStyle:{
                    color:'#ADADAD',
                }
            },
            }
        ],
        series: [
            {
                name:'增值数量',
                type:'bar',
                barWidth : 50,
                data:${addedValueCountList}
            },
            {
                name:'增值总额',
                type:'line',
                yAxisIndex: 1,
                symbol:'triangle',
                symbolSize: 16,//拐点大小
                data:${addedValueAmountList}
            },
            {
                name:'净值资产额度',
                type:'line',
                yAxisIndex: 1,
                symbolSize: 8,//拐点大小
                data:${netValueAmountList}
            }
        ]
    };
    myChart.setOption(option);
    window.onresize = function () {
        myChart.resize()
    };
</script>
</body>
</html>
